import React, { useEffect } from 'react'
import leftNav from '../../style/leftNav/leftNav.module.less'
import { useState } from 'react'
export default function LeftNav(props) {
    const [currentId, setCurrentId] = useState('')
    useEffect(() => {
        console.log('props', props, props.currentId)
        setCurrentId(props.currentId)
    }, [props])
    const changeShow = (child) => {
        const newArray = props.leftNavList.filter(item => item.id === child.id)
        setCurrentId(newArray[0].id)
        props.getClick(child)
    }
    return (
        <div className={leftNav.leftNav}>
            <ul className={props.leftNavList.length > 15 ? `${leftNav.exceedLength}` : ''}>
                {
                    props.leftNavList.map(item => {
                        if (currentId !== '') {
                            return (
                                <li key={item.id} className={item.id !== currentId ? `${leftNav.shoActive}` : `${leftNav.shoActive, leftNav.show}`} onClick={() => changeShow(item)}>{item.name}</li>
                            )
                        } else {
                            return (
                                <li key={item.id} className={item.name === '全部' ? `${leftNav.shoActive, leftNav.show}` : `${leftNav.shoActive}`} onClick={() => changeShow(item)}>{item.name}</li>
                            )
                        }
                    })
                }
            </ul>
        </div>
    )
}
